import React, { Fragment, useEffect } from "react";
import styles from "./index.less";
import { DatePicker } from "antd";
import { customDatePicker } from "@/utils/utils";
import date_icon from "@/assets/icons/icon_date.png";
import date_icon_active from "@/assets/icons/icon_date_active.png";
import * as cn from "classnames";
import dayjs from 'dayjs';

interface DateProps {
  label?: string;
  startValue: any;
  endValue?: any;
  idName1?: string;
  idName2?: string;
  onChange: (e: any, str: string) => void;
  className?: any;
  dropdownClassName?: any;
  labelClass?: string;
  picker?: "month" | "year" | "week";
  single?: boolean;
  disabledDate?: any; // 用单个时的禁用选项
}

const CusDatePicker = (props: DateProps) => {
  const {
    startValue,
    endValue,
    onChange,
    label,
    labelClass,
    className,
    picker,
    idName1,
    dropdownClassName,
    idName2,
    single,
    disabledDate,
  } = props;
  useEffect(() => {
    customDatePicker(date_icon, idName1 || "date12345", idName2 || "date23456");
  }, []);
  const onOpenChange = (open: boolean, idName: string) => {
    customDatePicker(open ? date_icon_active : date_icon, idName, idName);
    // onHandleOpenChange&&onHandleOpenChange();
  };
  return (
    (<div className={cn(styles.date, className)}>
      <span className={cn(styles.date_label, labelClass)}>{label}</span>
      <DatePicker
        allowClear={false}
        size="small"
        format={!picker && "YYYY/MM/DD"}
        id={idName1 || "date12345"}
        value={startValue}
        suffixIcon={null}
        picker={picker}
        onOpenChange={(open: boolean) => {
          onOpenChange(open, idName1 || "date12345");
        }}
        onChange={(e) => onChange(e, "start")}
        popupClassName={cn("my_date_dropdown date", dropdownClassName)}
        disabledDate={
          disabledDate
            ? disabledDate
            : (currentDate: any) => {
                return endValue
                  ? dayjs(currentDate).startOf("days").valueOf() >
                      dayjs(endValue).valueOf()
                  : false;
              }
        }
      />
      {!single && (
        <Fragment>
          <div className={styles.date_line}></div>
          <DatePicker
            allowClear={false}
            size="small"
            format={!picker && "YYYY/MM/DD"}
            id={idName2 || "date23456"}
            value={endValue}
            suffixIcon={null}
            picker={picker}
            onOpenChange={(open: boolean) => {
              onOpenChange(open, idName2 || "date23456");
            }}
            onChange={(e) => onChange(e, "end")}
            popupClassName={cn("my_date_dropdown date", dropdownClassName)}
            disabledDate={(currentDate: any) => {
              return endValue
                ? dayjs(currentDate).startOf("days").valueOf() <
                    dayjs(startValue).valueOf()
                : false;
            }}
          />
        </Fragment>
      )}
    </div>)
  );
};

export default CusDatePicker;
